<template>
	<div id="checkEmailPage">
		<div class="title"><i class="iconfont icon-icon1"></i>欢迎来到全宇支付平台</div>
		<!--实线-->
		<div class="solid"></div>
		<div class="main">
			<el-steps :space="200" :active="step" style="margin-top: 40px;">
				<el-step title="步骤 1" description="请输入邮箱地址"></el-step>
				<el-step title="步骤 2" description="请输入验证码"></el-step>

				<el-step title="步骤 3" description="绑定成功"></el-step>
			</el-steps>

			<div class="handle">
				<el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" ref="formLabelAlign">
					<div v-show="isShow1">
						<el-form-item prop="email" label="请输入邮箱地址" disabled="false" :rules="[
                                 { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                             { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' } ]">
							<el-input v-model="formLabelAlign.email" placeholder="请输入正确的邮箱地址"></el-input>

						</el-form-item>
						<el-button type="primary" style="margin-top: 10px;" @click="nextStep1('formLabelAlign')">下一步</el-button>
					</div>
					<div v-show="isShow2">
						<el-form-item label="请输入验证码">
							<el-input v-model="formLabelAlign.checkCode" placeholder="请输入正确的验证码"></el-input>

						</el-form-item>
						<el-button type="primary" style="margin-top: 15px;" @click="goBack1">上一步</el-button>
						<el-button type="primary" style="margin-top: 15px;" @click="nextStep2">下一步</el-button>
					</div>

					<el-form-item label="" v-show="isShow3">

						<el-button type="text" style="font-size: 35px;" title="点击返回到第一步" @click="goBack"><i class="el-icon-check"></i>绑定成功</el-button>

					</el-form-item>

				</el-form>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				step: 1,
				labelPosition: 'left',
				formLabelAlign: {
					email: '',
					checkCode: ''

				},
				isShow1: true,
				isShow2: false,
				isShow3: false,

			}
		},
		created() {

		},
		methods: {
			nextStep1(formName) {

				this.$refs[formName].validate((valid) => {
					if(valid) {
						console.log(this.formLabelAlign.email);
						let params = {
							email: this.formLabelAlign.email
						}
						this.$api.sendBindEmail(params).then(res => {
							if(res.data.code == '000000') {
								console.log(res.data);
								this.isShow1 = false;
								this.isShow2 = true;
								this.step = 2;
								this.$message({
									type: 'success',
									message: '邮箱验证成功，验证码已发送'
								})

							} else {
								this.$message({
									type: 'error',
									message: '邮箱验证失败'
								})
							}
						}).catch(() => {
							this.$message({
								type: 'error',
								message: '邮箱验证失败'
							})
						})

					} else {
						this.$message({
							type: 'warning',
							message: '你输入的邮箱格式不正确'
						})
						return false;
					}
				});
			},
			goBack1() {
				this.step = 1;
				this.isShow1 = true;
				this.isShow2 = false;
				this.formLabelAlign.checkCode = '';
				this.formLabelAlign.email = ''
			},
			nextStep2() {
				var pattern = /[\u4e00-\u9fa5]/;
				if(pattern.test(this.formLabelAlign.checkCode)) {
					this.$message({
						type: 'warning',
						message: '验证码格式不能是中文'
					})
					return false;
				}

				if(this.formLabelAlign.checkCode == '') {
					this.$message({
						type: 'warning',
						message: '请输入验证码'
					})
				} else if(this.formLabelAlign.checkCode.length != 6) {
					this.$message({
						type: 'warning',
						message: '您输入的验证码位数不正确'
					})
					this.formLabelAlign.checkCode = '';

				} else {
					let params = {
						code: this.formLabelAlign.checkCode
					}
					this.$api.checkCode(params).then(res => {
						if(res.data.code == '000000') {
							console.log(res.data);
							this.step = 3;
							this.isShow2 = false;
							this.isShow3 = true;
							this.formLabelAlign.checkCode = '';
							this.formLabelAlign.email = '';
							this.$message({
								type: 'success',
								message: '验证码验证成功'
							})
						} else {
							this.$message({
								type: 'error',
								message: '验证码验证失败'
							})
						}
					}).catch(() => {
						this.$message({
							type: 'error',
							message: '验证码验证失败'
						})
					})

				}
			},
			goBack() {
				this.step = 1;
				this.isShow3 = false;
				this.isShow1 = true;
			}
		}
	}
</script>

<style lang="less">
	#checkEmailPage {
		padding: 20px;
		.icon-icon1 {
			font-size: 35px!important;
			margin-right: 35px;
			position: absolute;
			color: #008000;
			right: 100px;
			bottom: -8px;
		}
		.title {
			text-align: right;
			font-size: 12px;
			margin-bottom: 10px;
			position: relative;
		}
		.icon-icon1 {
			font-size: 25px;
		}
		.solid {
			background-color: black;
			height: 2px;
		}
		.main {
			.handle {
				width: 40%;
				margin: auto;
				margin-top: 60px;
			}
		}
		.el-steps.is-horizontal>.is-horizontal:last-child {
			width: 60px!important;
		}
	}
</style>